<script lang="ts" setup>
import {useRouter} from 'vue-router'
import {onMounted} from "vue";

const router = useRouter()
onMounted(() => {
  setTimeout(() => {
    router.push('/sets/111')
  }, 5000)
})
const gosets = () => {
  //router.push('/sets/123')
  //router.push({name: 'sets', params: {id: 33}, query: {name: '李强'}})
  //router.back()
  // router.go(-1)
  //router.forward()
  //router.go(1)
  router.go(-3)
}
</script>
<template>
  <button @click="gosets">go settings</button>
  <br><br><br>
  <router-link to="/names">/names</router-link>
  <router-link to="/n1">/n1</router-link>
  <router-link to="/n2">/n2</router-link>
  <router-link to="/n3">/n3</router-link>
  <router-link :to="{name:'na'}">name:na</router-link>


  <br><br><br>
  <router-link to="/ss/1/22/333">学生成绩params 数组</router-link>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <!-- {path: '/sets/:id',...} -->
  <!-- {{ $route.params.id }} -->
  <router-link to="/aa/600">设置中心/aa</router-link>
  <router-link to="/sets">设置中心</router-link>
  <router-link :to="{name:'sets',params:{id:9999},query:{name:'jack'}}">设置中心/sets/99</router-link>
  <router-link to="/sets/222?name=张三丰">设置中心 /sets/222?name=张三丰</router-link>
  <router-link :to="{path:'/sets/1199',query:{name:'李四'}}">设置中心</router-link>
  <hr>
  <router-view v-slot="{ Component }">
    <transition mode="out-in" name="fade-transform">
      <keep-alive>
        <div :key="$route.path">
          <component :is="Component"/>
        </div>
      </keep-alive>
    </transition>
  </router-view>
</template>
<style scoped>
/*global transition css*/

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform--move,
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}


/* 下面我们会解释这些 class 是做什么的 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.1s ease-out;
}

.slide-fade-leave-active {
  /*transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);*/
  transition: all 0.1s ease-in;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

a {
  text-decoration: none;
  padding: 5px;
  border: 1px solid gray;
  margin: 13px;
  background-color: #ff0;
}

a:hover {
  background-color: orange;
}

.router-link-exact-active, .router-link-active {
  color: red;
  background-color: orange;
}

.aa {
  color: red;
  background-color: orange;
}
</style>
